<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2021/12/10
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<div style="margin: 10px">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="empName" placeholder="请输入员工姓名"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="email"   placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="did" lay-search="" id="did">
                        <option value="">选择部门名称</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
                </div>
            </div>
        </div>
    </form>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<%--修改的编辑框--%>
<div id="editEmp" style="display: none;padding: 10px">
    <form class="layui-form" lay-filter="empForm">
        <div class="layui-form-item">
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width: 80px;height: 80px;border: 1px solid #f3f3f3">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
            <a name="list-progress"> </a>
        </div>
        <input type="text" style="display: none" name="empid"/>
        <input type="text" style="display: none" id="headImg" name="headImg"/>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名:</label>
            <div class="layui-input-block">
                <input type="text" name="empname"  lay-verify="required" autocomplete="off" placeholder="员工姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">部门:</label>
            <div class="layui-input-block">
                <%--name的值必须和实体类的对应。--%>
                <select name="did" lay-search="" id="d_id">
                    <option value="">选择部门名称</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-block">
                <input type="text" name="email"  lay-verify="required|email" autocomplete="off" placeholder="员工邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别:</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="M" title="男">
                <input type="radio" name="gender" value="F" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="update">确认</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use(['table','form','jquery','layer','upload', 'element'], function() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var  upload = layui.upload;
        var element = layui.element;
        var layer = layui.layer;

        //头像上传
        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '${pageContext.request.contextPath}/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                //如果上传失败
                if(res.code===5000){
                    return layer.msg('上传失败');
                }
                //上传成功的一些操作. 隐藏域 把上传的图片路径随着表单的提交而被提交到后台。
                $("#headImg").val(res.data);
                $('#demoText').html(''); //置空上传失败的状态
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
            //进度条
            ,progress: function(n, elem, e){
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });


        window.onload=function(){ //页码加载完毕后执行的函数 $(function(){})
              getAllDept();
        }
        function getAllDept(){
            $.ajax({
                url:"${pageContext.request.contextPath}/dept/getAllDept",
                type:"post",
                async: false,  //ajax异步交互。  async:false改为同步交互
                success: function(result){ //result:==={code:2000,msg:"查询成",data:[]}
                     var depts=result.data;
                     var str="<option value=''>选择部门名称</option>";
                     for(var i=0;i<depts.length;i++){
                           str+="<option value='"+depts[i].deptid+"'>"+depts[i].deptname+"</option>"
                     }
                     $("#did").html(str); //搜索框
                     $("#d_id").html(str); //修改框
                     form.render('select'); //让form表单的select标签重新渲染
                },
                dataType:"json"
            });
        }

        //添加表单的搜索监听事件
        form.on('submit(search)',function(data){
               //表格数据重新渲染。
               table.reload('test',{
                   page: {
                       curr: 1 //重新从第 1 页开始
                   },
                   where: { //按照什么进行查找
                       "empName": data.field.empName,
                       "email": data.field.email,
                       "did": data.field.did
                   }
               })
        });

        //修改按钮的事件
        form.on('submit(update)',function(data){
                $.ajax({
                      url:"${pageContext.request.contextPath}/emp/update",
                      data: data.field,
                      type:"post",
                      dataType:"json",
                      success: function(result){
                             layer.closeAll();
                             if(result.code===2000){
                                    layer.msg(result.msg,{icon:1});
                                    table.reload('test');
                             }else{
                                 layer.msg(result.msg,{icon:5});
                             }
                      }
                });
        })

        //监听行工具条
        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){

            } else if(obj.event === 'edit'){
                 layer.open({
                       type:1,
                       title:"修改员工信息",
                       area:['360px','400px'],
                       content: $("#editEmp")
                 })
                form.val('empForm',data)
            }
        });


        //表格渲染
        table.render({
            elem: '#test'
            // ,id:"test"
            , url: '${pageContext.request.contextPath}/emp/listByCondition'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , title: '员工数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'empid', title: '编号',  sort: true}
                , {field: 'headImg', title: '头像',  templet:function(d){
                       return "<img width='50px' src='"+d.headImg+"'/>"
                }}
                , {field: 'empname', title: '姓名'}
                , {field: 'email', title: '邮箱'}
                , {field: 'gender', title: '性别',sort: true,templet:function(d){ //d:表示当前行的数据
                       return d.gender=='M'?"男":"女";
                }}
                , {field: 'dept', title: '部门名称',templet:function(d){
                      return d.dept==null?"":d.dept.deptname;
                }}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
            , limit: 5 //默认每页显示5条
            , limits:[2,5,10,15]
        });
    });
</script>
</body>
</html>
